---
title: '@theme-ui/typography'
---

import TypographyLayout from '../../components/typography-layout'
import Lorem from '../../components/lorem.mdx'

export default TypographyLayout

# @theme-ui/typography

This page uses themes from Typography.js to populate the `theme` object. Select
a theme from the controls above to view a live demo of each one.

## Usage

```sh
npm i @theme-ui/typography
```

Use the `toTheme` function to create a base `theme` object based on
Typography.js options or a preset Typography.js theme.

```js
import { ThemeUIProvider } from 'theme-ui'
import { toTheme } from '@theme-ui/typography'
import wp2016 from 'typography-theme-wordpress-2016'

const theme = toTheme(wp2016)

export default (props) => (
  <ThemeUIProvider theme={theme}>{props.children}</ThemeUIProvider>
)
```

## Extending the Typography.js theme

Use a deep merge utility, like the `deepmerge` package, to extend or override
the returned theme object.

```js
import { toTheme } from '@theme-ui/typography'
import wp2016 from 'typography-theme-wordpress-2016'
import merge from 'deepmerge'

const theme = merge(toTheme(wp2016), {
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#07c',
  },
})
```

_Demo content below_

---

<Lorem />
